<template>
  <div>
    <FormPanel ref="FormPanel" :list="formList" :isSubmitBtn="false" :labelWidth="85" :cols="3" />
    <div class="detail_main">
      <div class="detail_top">
        <h2>车主车辆信息</h2>
      </div>
      <div class="detail_containter">
        <FormPanel ref="FormPanel1" :list="formList1" formType="add" :isSubmitBtn="false" :labelWidth="120" :cols="3" @formChange="changeHandle1" />
      </div>
    </div>
    <div class="detail_main">
      <div class="detail_top">
        <h2>投保信息</h2>
      </div>
      <div class="detail_containter">
        <FormPanel ref="FormPanel2" :list="formList2" formType="add" :isSubmitBtn="false" :labelWidth="120" :cols="3" @formChange="changeHandle2" />
      </div>
    </div>
    <FilterTable
      ref="basetables"
      :columns="columns"
      :dataSource="tablelist"
      :onColumnsChange="columns1 => (this.columns1 = columns1)"
      :height="'200'"
      :onSyncTableData="tablechangeFun"
      columnsRef="zjbxtbTable"
    >
      <template slot="controls" slot-scope="props">
        <el-button type="primary" @click="addFun()">新增</el-button>
      </template>
    </FilterTable>
    <FormPanel ref="FormPanel3" :list="formList3" formType="add" :isSubmitBtn="false" :labelWidth="120" :cols="3" @formChange="changeHandle2" />
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'center'
      }"
    >
      <el-button type="primary" @click="saveFun()">保 存</el-button>
      <el-button @click="cancelFun()">取 消</el-button>
    </div>
    <BaseDialog :visible.sync="visible" title="险种选择" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <share @close="closeShare" @changeData="changeData"></share>
    </BaseDialog>
  </div>
</template>
<script>
import share from './share.vue';
export default {
  components: {
    share
  },
  data() {
    this.baseTable = null;
    return {
      formList: this.createFrom(),
      formList1: this.createFrom1(),
      formList2: this.createFrom2(),
      formList3: this.createFrom3(),
      columns: this.createTable(),
      tablelist: [],
      visible: false
    };
  },
  mounted() {
    this.basetables = this.$refs.basetables.$refs.pageTable;
  },
  methods: {
    createFrom() {
      return [
        {
          type: 'INPUT',
          label: '投保编号',
          fieldName: 'PROPOSAL_CODE',
          initialValue: ''
        },
        {
          type: 'SELECT',
          label: '投保类型',
          fieldName: 'PROPOSAL_TYPE',
          initialValue: '',
          itemList: []
        }
      ];
    },
    createFrom1() {
      return [
        {
          type: 'INPUT',
          label: '车主编号',
          fieldName: 'OWNER_NO',
          initialValue: '',
          disabled: true,
          unitRender: props => {
            <div>
              <el-button icon="el-icon-search" onClick={this.seacherFun}></el-button>
            </div>;
          }
        },
        {
          type: 'INPUT',
          label: '车主名称',
          fieldName: 'OWNER_NAME',
          initialValue: '',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '电话',
          fieldName: 'PHONE',
          initialValue: '',
          disabled: true
        },
        {
          type: 'SELECT',
          label: '客户类型',
          fieldName: 'OWNER_PROPERTY',
          initialValue: '',
          itemList: [],
          disabled: true
        },
        {
          type: 'INPUT',
          label: '手机',
          fieldName: 'MOBILE',
          initialValue: '',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '邮编',
          fieldName: 'ZIP_CODE',
          initialValue: ''
        },
        {
          type: 'TEXT_AREA',
          label: '地址',
          fieldName: 'ADDRESS',
          initialValue: '',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '车牌号',
          fieldName: 'LICENSE',
          initialValue: '',
          disabled: true
        },
        {
          type: 'INPUT',
          label: 'VIN',
          fieldName: 'VIN',
          initialValue: '',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '发动机号',
          fieldName: 'ENGINE_NO',
          initialValue: '',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '核定载客',
          fieldName: 'APPROVED_CUSTOMER_COUNT',
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: '核定载客质量(kg)',
          fieldName: 'APPROVED_CUSTOMER_QUALITY',
          initialValue: '',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '排量/功率(L/K)',
          fieldName: 'TAX_NO',
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: '已使用年限',
          fieldName: 'USED_YEAR',
          initialValue: ''
        },
        {
          type: 'DATE',
          label: '初次登记日期',
          fieldName: 'FIRST_REGISTER_DATE',
          initialValue: '',
          rules: [{ required: true, message: '请选择', trigger: 'change' }]
        },
        {
          type: 'SELECT',
          label: '机动车种类',
          fieldName: 'VEHICLE_TYPE',
          initialValue: '',
          itemList: []
        },
        {
          type: 'SELECT',
          label: '机动车使用性质',
          fieldName: 'VEHICLE_USE_NATURE',
          initialValue: '',
          itemList: [],
          rules: [{ required: true, message: '请选择', trigger: 'change' }]
        },
        {
          type: 'SELECT',
          label: '品牌',
          fieldName: 'BRAND_CODE',
          initialValue: '',
          itemList: []
        },
        {
          type: 'SELECT',
          label: '车系',
          fieldName: 'SERIES',
          initialValue: '',
          itemList: []
        },
        {
          type: 'SELECT',
          label: '车型',
          fieldName: 'MODEL',
          initialValue: '',
          itemList: []
        },
        {
          type: 'SELECT',
          label: '颜色',
          fieldName: 'COLOR',
          initialValue: '',
          itemList: []
        },
        {
          type: 'SELECT',
          label: '销售模式',
          fieldName: 'SALES_MODEL',
          initialValue: '',
          itemList: []
        },
        {
          type: 'SELECT',
          label: '经销商',
          fieldName: 'DEALER_CODE',
          initialValue: '',
          itemList: []
        },
        {
          type: 'INPUT',
          label: '投保编号',
          fieldName: 'OWNER_NO',
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: '车辆销售日期',
          fieldName: 'STOCK_OUT_DATE',
          initialValue: '',
          disabled: true
        },
        {
          type: 'SELECT',
          label: '保险顾问',
          fieldName: 'INS_BROKER',
          initialValue: '',
          itemList: [],
          rules: [{ required: true, message: '请选择', trigger: 'change' }],
          disabled: true
        },
        {
          type: 'INPUT',
          label: '订单编号',
          fieldName: 'SO_NO',
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: '车辆购置税',
          fieldName: 'TAX_SUM',
          initialValue: ''
        }
      ];
    },
    createFrom2() {
      return [
        {
          type: 'INPUT',
          label: '投保人姓名',
          fieldName: 'OWNER_NAME',
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: '电话',
          fieldName: 'PHONE',
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: '手机',
          fieldName: 'MOBILE',
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: '邮编',
          fieldName: 'ZIP_CODE',
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: '地址',
          fieldName: 'ADDRESS',
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: '被保险人',
          fieldName: 'OWNER_NAME',
          initialValue: '',
          rules: [{ required: true, message: '请选择', trigger: 'blur' }]
        },
        {
          type: 'SELECT',
          label: '证件类别',
          fieldName: 'CERTIFICATE_NO',
          initialValue: '',
          itemList: [],
          rules: [{ required: true, message: '请选择', trigger: 'change' }]
        },
        {
          type: 'INPUT',
          label: '证件号码',
          fieldName: 'CERTIFICATE_NO',
          initialValue: '',
          rules: [{ required: true, message: '请选择', trigger: 'blur' }]
        },
        {
          type: 'SELECT',
          label: '与机动车关系',
          fieldName: 'VEHICLE_RELATION',
          initialValue: '',
          itemList: []
        },
        {
          type: 'SELECT',
          label: '是否本地投保',
          fieldName: 'IS_INS_LOCAL',
          initialValue: '',
          itemList: [],
          rules: [{ required: true, message: '请选择', trigger: 'change' }]
        },
        {
          type: 'SELECT',
          label: '是否信贷投保',
          fieldName: 'IS_INS_CREDIT',
          initialValue: '',
          itemList: [],
          rules: [{ required: true, message: '请选择', trigger: 'change' }]
        },
        {
          type: 'SELECT',
          label: '保险公司',
          fieldName: 'INSURATION_CODE',
          initialValue: '',
          itemList: [],
          rules: [{ required: true, message: '请选择', trigger: 'change' }]
        },
        {
          type: 'SELECT',
          label: '投保渠道',
          fieldName: 'INS_CHANNELS',
          initialValue: '',
          itemList: [],
          rules: [{ required: true, message: '请选择', trigger: 'change' }]
        },
        {
          type: 'DATE',
          label: '保险销售日期',
          fieldName: 'insSalesDate',
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: '交强险保单号',
          fieldName: 'COM_INS_CODE',
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: '商业险保单号',
          fieldName: 'BUSI_INS_CODE',
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: '赠送卡券',
          fieldName: 'BUSI_INS_CODE',
          initialValue: ''
        }
      ];
    },
    createFrom3() {
      return [
        {
          type: 'INPUT',
          label: '交强险应收金额',
          fieldName: 'RECEIVABLE_COM_AMOUNT',
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: '商业险应收金额',
          fieldName: 'RECEIVABLE_BUSI_AMOUNT',
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: '优惠金额',
          fieldName: 'TOTAL_DISCOUNT_AMOUNT',
          initialValue: ''
        },
        {
          type: 'SELECT',
          label: '是否代收',
          fieldName: 'IS_COLLECTION',
          initialValue: '',
          itemList: []
        },
        {
          type: 'INPUT',
          label: '交强险返利金额',
          fieldName: 'COM_INSURANCE_REBATE_AMT',
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: '商业险返利金额',
          fieldName: 'BUSI_INSURANCE_REBATE_AMT',
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: '车船税',
          fieldName: 'TRAVEL_TAX_AMOUNT',
          initialValue: ''
        },
        {
          type: 'SELECT',
          label: '是否返利付讫',
          fieldName: 'IS_PAYOFF_REBATE',
          initialValue: '',
          itemList: []
        },
        {
          type: 'INPUT',
          label: '其他业务',
          fieldName: 'OTHER_AMOUNT',
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: '总金额(应收)',
          fieldName: 'applyAmount',
          initialValue: ''
        },
        {
          type: 'INPUT',
          label: '总金额(实际)',
          fieldName: 'TOTAL_AMOUNT',
          initialValue: ''
        },
        {
          type: 'TEXT_AREA',
          label: '备注',
          fieldName: 'REMARK',
          initialValue: ''
        }
      ];
    },
    createTable() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          sorter: true,
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '操作',
          dataIndex: 'STORAGE_CODE',
          sorter: true,
          filter: true,
          render: props => {
            return <el-button>删除</el-button>;
          }
        },
        {
          title: '险种名称',
          dataIndex: 'INSURANCE_TYPE_NAME',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.INSURANCE_TYPE_NAME}</span>;
          }
        },
        {
          title: '险种类型',
          dataIndex: 'INSURANCE_TYPE_LEVEL',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.INSURANCE_TYPE_LEVEL}</span>;
          }
        },
        {
          title: '保额',
          dataIndex: 'PROPOSAL_AMOUNT',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.PROPOSAL_AMOUNT}</span>;
          }
        },
        {
          title: '应收金额',
          dataIndex: 'RECEIVABLE_AMOUNT',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.RECEIVABLE_AMOUNT}</span>;
          }
        },
        {
          title: '开始日期',
          dataIndex: 'BEGIN_DATE',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.BEGIN_DATE}</span>;
          }
        },
        {
          title: '结束日期',
          dataIndex: 'END_DATE',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.END_DATE}</span>;
          }
        },
        {
          title: '是否赠送',
          dataIndex: 'IS_PRESENTED',
          sorter: true,
          filter: true,
          render: props => {
            return <span>{props.row.IS_PRESENTED}</span>;
          }
        }
      ];
    },
    tablechangeFun(val) {},
    changeHandle1(val) {},
    changeHandle2(val) {},
    seacherFun() {},
    addFun() {
      this.visible = true;
    },
    closeShare(val) {
      this.visible = false;
    },
    changeData(val) {
      this.visible = false;
    },
    // 保存
    saveFun() {},
    // 取消
    cancelFun() {}
  }
};
</script>
<style lang="less" scoped>
.detail_main {
  border: 1px solid #ebeef5;
  margin-bottom: 10px;
  .detail_top {
    background: #f2f2f2;
    border-bottom: 1px solid #ebeef5;
    height: 25px;
    line-height: 25px;
    padding: 0 10px;
  }
  .detail_containter {
    padding-top: 10px;
  }
}
</style>
